<!--
 * @Author: hu_binbin
 * @Date: 2021-06-24 16:15:29
 * @LastEditTime: 2021-08-10 11:21:42
 * @Description: 选择班组下人员
-->

<template>
    <div class="selectSubstation">
        <van-nav-bar class="subClass" left-text="取消" right-text="确认" title="选择人员" @click-left="back"  @click-right="selPersonBtn"></van-nav-bar>
        </van-nav-bar>
      <van-search v-model.trim="selName" clearable @clear="clear"  @input="focus" shape="round" background="#fff" placeholder="请输入搜索内容">
        </van-search>
      
        <van-cell
        v-for="(item,index) in showPersonList"
        clickable
        :key="index"            
        >
            <div slot="title" style="display: flex;justify-content: space-between;">
                <span>{{ item.userName }}</span>
                <van-checkbox style="display: inline;" @click="selCheck(item,index)" v-model="item.check" checked-color="#057b54"/>
            </div>
        </van-cell>
        <van-cell v-if="showPersonList.length==0" style="text-align: center;" title="无数据"></van-cell>
    </div>
  </template>
  
  <script>
  import {getUserList} from "../modules/tour/api/common"
  const PinyinEngine = require('pinyin-engine');
  export default {
    name: 'SelDevice',
    props: {
      teamId: {
        type: String,
        default: ""
      },
      userList:{
        type: Array,
        default: function() {
          return [];
        }
      },
      single:{//单选、多选
        type:Boolean,
        default: false
      }
    },
    data () {
      return {
        selName: "",
        showPersonList:[],
        userInfo:{},
        pinyinEngineByShow: null, //拼音引擎，用于拼音搜索-展示用
      }
    },
    computed: {
      
    },
    methods: {
        //关闭组件
        back() {
            this.$emit("closePersonPage")
        },
        clear() {
          this.showPersonList = this.pinyinEngineByShow.query("")
        },
        //选择设备类型名称
        selPersonBtn() {
            var person = [];
            this.showPersonList.map(item => {
                if(item.check) {
                    person.push(item)
                }
            })
            if(person.length == 0) {
              this.$Toast("请选择人员")
              return;
            } 
            console.log("人员",person)
            this.$emit("comfirmPerson",person)
        },
        /**
         * @description:人员搜索
         */ 
        focus() {
          this.showPersonList = this.pinyinEngineByShow.query(this.selName)
        },
        /**
         * @description: 获取班组成员
         */ 
         getPeopleList() {
            var self = this;
            var params = {
                keyword: this.selName,//人员名称
                roleCode: "",
                teamId: this.userInfo.orgId,
                userId: this.userInfo.userId,
            };
            this.$toast.loading({
                duration: 0,//展示时长 0不会消失
                message: "加载中人员...",
                forbidClick: true,//是否禁止背景点击
                overlay: true//是否显示背景遮罩层
            })
			      console.log("params",params)
            getUserList(params).then(data => {
                self.$Toast.clear();
                if(data.success) {
                    self.$Toast.success(data.msg)
                    var selPerson = data.data;
                    console.log("selPerson",selPerson)
                    if(selPerson && selPerson.length > 0) {
                        selPerson.forEach(item => {
                          item["check"] = false;
                        })
                        self.showPersonList =selPerson;
                        self.pinyinEngineByShow = new PinyinEngine(self.showPersonList, ["userName","userId"])
                        self.dealSelPer();
                    }else{
                        self.showPersonList =[]
                    }
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.$Toast.fail(err)
            })
        },
        //展示选中人员
        dealSelPer() {
          this.showPersonList.forEach(item => {
            item["check"] = false;
          })
          if(this.userList.length == 0) {
            return;
          }
          console.log("showPersonList",this.showPersonList)
          var list = this.userList.map(item => item.userId);
          for(var Person of this.showPersonList) {
            var index = list.indexOf(Person.userId);
            if(index != -1) {
              Person["check"] = true;
            }
          }
        },
        /**
         * @description: 
         * @param {*}
         * @return {*}
         */
        selCheck(item,index) {
          if(this.single) {//单选
            if(item.check) {
              this.showPersonList.forEach(user => {
                user.check = false;
              })
              item.check = true;
            }else{
              this.showPersonList.forEach(user => {
                user.check = false;
              })
            }
          }
        }
    }, 
    watch: {
      userList(newValue, odlValue) {
          //类型切换后，数据重新查询
          this.dealSelPer()
      }, 
    }, 
    mounted() {
      // var userInfo = localStorage.getItem("userInfo");
			// this.userInfo = JSON.parse(userInfo);
      // this.getPeopleList()
    },
    created() {
      var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
      this.getPeopleList()
    }
  }
  </script>
  
  <style scoped>
  .selectSubstation {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .tabList {
    width:100%;
    height:90%;
    overflow-y:auto;
  }
  .van-nav-bar {
    z-index: 10;
    background: linear-gradient(to right, #036257, #057b54);
  }
  /deep/ .van-nav-bar__title {
    color: #fff !important;
    font-size: 20px !important;
  }
  /deep/ .van-nav-bar__text, .van-nav-bar .van-icon {
    color: #fff !important;
    font-size: 16px !important;
  }
  </style>
  
